﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery MaskedInput, MaskedInput, Input, Mask TextBox, TextBox, Mask, jqxMaskedInput" /> 
    <meta name="description" content="The jqxMaskedInput widget uses a mask to distinguish between
        proper and improper user input. You can define phone number, ssn, zip code, dates,
        etc. masks by setting the jqxMaskedInput mask property."/>
    <title id='Description'>The jqxMaskedInput widget uses a mask to distinguish between
        proper and improper user input. You can define phone number, ssn, zip code, dates,
        etc. masks by setting the jqxMaskedInput mask property. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxMaskedInputs
            $("#numericInput").jqxMaskedInput({ width: '250px', height: '25px'});
            $("#zipCodeInput").jqxMaskedInput({ width: 250, height: 25, mask: '#####-####'});
            $("#ssnInput").jqxMaskedInput({ width: 250, height: 25, mask: '###-##-####'});
            $("#phoneInput").jqxMaskedInput({ width: 250, height: 25, mask: '(###)###-####'});
            $("#regexInput").jqxMaskedInput({ width: 250, height: 25, mask: '[0-2][0-5][0-5].[0-2][0-5][0-5].[0-2][0-5][0-5].[0-2][0-5][0-5]'});
            $("#disabledInput").jqxMaskedInput({width: 250, height: 25, disabled: true});
            // add clear button.
            $("#clearButton").jqxButton({  });
            // clear all values when the button is clicked.
            $("#clearButton").click(function () {
                $("#numericInput").jqxMaskedInput('clearValue');
                $("#zipCodeInput").jqxMaskedInput('clearValue');
                $("#ssnInput").jqxMaskedInput('clearValue');
                $("#phoneInput").jqxMaskedInput('clearValue');
                $("#regexInput").jqxMaskedInput('clearValue');
                $("#disabledInput").jqxMaskedInput('clearValue');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;">
        <div style='margin-top: 10px;'>
            Numeric</div>
        <input style='margin-top: 3px;' id='numericInput'/>
        <div style='margin-top: 10px;'>
            Zip Code</div>
        <input style='margin-top: 3px;' id='zipCodeInput'/>
        <div style='margin-top: 10px;'>
            SSN</div>
        <input style='margin-top: 3px;' id='ssnInput'/>
        <div style='margin-top: 10px;'>
            Phone Number</div>
        <input style='margin-top: 3px;' id='phoneInput'/>
        <div style='margin-top: 10px;'>
            IP Address (ex: 255.255.255.255)
        </div>
        <input style='margin-top: 3px;' id='regexInput'/>
        <div style='margin-top: 10px;'>
            Disabled
        </div>
        <input style='margin-top: 3px;' id='disabledInput'/>
    </div>
      <input style="margin-top: 10px;" type="button" id="clearButton" value="Clear Values" />
</body>
</html>
